<script setup>
// 引入 api
import { ref } from "vue"

// 类对象
const btnClass = ref([false, false, false])

// 进入函数
function enter(index) {
    btnClass.value[index] = true
}

// 退出函数
function leave(index) {
    btnClass.value[index] = false
}
</script>

<template>
    <!-- 段落 -->
    <ul>
        <li v-for="(item, index) in btnClass" @mouseenter="enter(index)" @mouseleave="leave(index)"
            :class="['list-item', { 'hovered': btnClass[index] }]">
            这是第{{ index + 1 }}个列表项
        </li>
    </ul>
</template>

<style scoped>
.hovered {
    color: pink;
}
</style>